<template>
<div>
  <input type="file"  accept="image/*" @change="getImageInput($event)" ref="getImageInput"/>
  <img :src="img" alt="">

<!--  <el-upload-->
<!--      class="avatar-uploader"-->
<!--      :action="'http://122.112.158.215/api/pc/ship/uploadFile'"-->
<!--      name="myfile"-->
<!--      :limit="1"-->
<!--      :headers="myHeaders"-->
<!--      :file-list="fileList"-->
<!--  >-->
<!--    <el-button type="primary">点击上传</el-button>-->
<!--  </el-upload>-->
</div>
</template>

<script>
export default {
  name: "uploadImg",
  data() {
    return {
      fileList: [],
      myHeaders:{Authorization:'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1bmlxdWVfbmFtZSI6InVzZXIiLCJ1c2VyaWQiOiIxNTIiLCJpc3MiOiJwYy5hcGkuc2llLmNvbSIsImF1ZCI6IjA5OGY2YmNkNDYyMWQzNzNjYWRlNGU4MzI2MjdiNGY2IiwiaWF0IjoxNjYzNzMwMzUyLCJuYmYiOjE2NjM3MzAzNTJ9.hK-DrOHnz6_Ny0k8t0eH6er6hQRLXENnuP_reUjLdnA'},
      imageList:[],
      img:'',
      submitImageList:[]
    }
  },
  methods:{
    getImageInput(e) {
      console.log(e.target)
      let file = e.target.files[0]
      // 创建文件读取对象
      var reader = new FileReader()
      //  将文件读取为DataURL
      reader.readAsDataURL(file)
      // 读取成功调用方法
      reader.onload = e => {
        console.log('读取成功',e.target.result); // e.target.result 获取 读取成功后的  文件DataURL
        this.img = e.target.result
        // 如果要将图片上传服务器，就在这里调用后台方法
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "http://122.112.158.215/api/pc/ship/uploadFile");
        xhr.setRequestHeader("Authorization", "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1bmlxdWVfbmFtZSI6InVzZXIiLCJ1c2VyaWQiOiIxNTIiLCJpc3MiOiJwYy5hcGkuc2llLmNvbSIsImF1ZCI6IjA5OGY2YmNkNDYyMWQzNzNjYWRlNGU4MzI2MjdiNGY2IiwiaWF0IjoxNjYzNzMwMzUyLCJuYmYiOjE2NjM3MzAzNTJ9.hK-DrOHnz6_Ny0k8t0eH6er6hQRLXENnuP_reUjLdnA");
      }
    }
  }
}
</script>

<style scoped>

</style>